<extend name="Base:main" />
<block name="title">
<title>复仇者联盟 - 用户区域性分析</title>
</block>
<block name="main-content">
<div class="row">
	<div class="box col-md-6">
		<div class="box-inner">
			<div class="box-header well" data-original-title="">
				<h2>
					<i class="glyphicon glyphicon-user"></i>用户区域列表
				</h2>

				<div class="box-icon">
					<a href="#" class="btn btn-minimize btn-round btn-default"> <i
						class="glyphicon glyphicon-chevron-up"></i>
					</a> <a href="#" class="btn btn-close btn-round btn-default"> <i
						class="glyphicon glyphicon-remove"></i>
					</a>
				</div>
			</div>
			<div class="box-content">
				<div class="alert alert-info">对用户进行图表及分析</div>
				<div class="loading col-sm-12 center">
					<img src="__PUBLIC__/img/ajax-loaders/ajax-loader-5.gif">
				</div>
				<table
					class="table table-striped table-bordered bootstrap-datatable datatable responsive"
					id="orderlist" style="display: none;">
					<thead>
						<tr>
							<th>省份</th>
							<th>用户量</th>
						</tr>
					</thead>
					<tbody>
						<foreach name="list" item="v">
						<tr id="row_{$v.id}">
							<td>{$v.label}</td>
							<td>{$v.data}</td>
						</tr>
						</foreach>
					</tbody>
				</table>
			</div>
			<!-- end box-content -->
		</div>
		<!-- end box-inner -->
	</div>
	<!-- end box -->
	<div class="box col-md-6">
		<div class="box-inner">
			<div class="box-header well">
				<h2>
					<i class="glyphicon glyphicon-list-alt"></i> 用户区域性图表
				</h2>

				<div class="box-icon">
					<a href="#" class="btn btn-setting btn-round btn-default"><i
						class="glyphicon glyphicon-cog"></i></a> <a href="#"
						class="btn btn-minimize btn-round btn-default"><i
						class="glyphicon glyphicon-chevron-up"></i></a> <a href="#"
						class="btn btn-close btn-round btn-default"><i
						class="glyphicon glyphicon-remove"></i></a>
				</div>
			</div>
			<div class="box-content">
				<div id="area_flot" class="center" style="height: 300px;"></div>
				<div id="area_flot_footer" class="center"></div>
			</div>
		</div>
	</div>
</div>
<!--/row--> <!-- end row --> <!-- 删除菜单弹出框 -->
<div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">删除</h4>
			</div>
			<div class="modal-body">
				<p id="sccontent" name="sccontent" style="font-size: 15px">你确定要删除该用户吗？该操作不可恢复！</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-danger">确定</button>
			</div>
		</div>
	</div>
</div>
</block>
<block name="js-content"> <!-- chart libraries start --> <script
	src="__PUBLIC__/bower_components/flot/excanvas.min.js"></script> <script
	src="__PUBLIC__/bower_components/flot/jquery.flot.js"></script> <script
	src="__PUBLIC__/bower_components/flot/jquery.flot.pie.js"></script> <!-- chart libraries end -->
<script type="text/javascript">
$(function() {
	var data = <?php echo json_encode($list);?>;
	//pie chart
	if ($("#area_flot").length) {
		$.plot($("#area_flot"),data,
						{
							series : {
								pie : {
									show : true,
									radius : 1,
									label : {
										show : true,
										radius : 2 / 3,
										formatter : function(label, series) {
											return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'
													+ label
													+ '<br/>'
													+ Math.round(series.percent)
													+ '%</div>';
										},
										threshold : 0.1
									}
								}
							},
							grid : {
								hoverable : true,
								clickable : true
							},
							legend : {
								show : false,//是否显示右边图例
							}
						});

		function pieHover(event, pos, obj) {
			if (!obj)
				return;
			//             console.log(obj);
			percent = parseFloat(obj.series.percent).toFixed(2);
			$("#area_flot_footer").html(
					'<span style="font-weight: bold; color: ' + obj.series.color + '">'
							+ obj.series.label + obj.series.data[0][1]+
							' 人(' + percent
							+ '%)</span>');
		}

		$("#area_flot").bind("plothover", pieHover);
	}
});
</script> </block>